import React,{Component} from 'react';
import { Table, Button } from 'antd';
import './index.css'
import ExtractModel from '../capacitymeun/ExtractModel';
import JournalModel from '../capacitymeun/JournalModel'
import InstModel from '../capacitymeun/InstModel'
import {withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import {fullCapacity,delectCapacity} from '../../redux/capacitymeun/menuList'
import { routuOne,classOne,deleclassOne,deleclassTwo,ClassMenu } from '../../redux/classFicationg/classFication'
import { Input } from 'antd';
const Search = Input.Search;

@withRouter
@connect(
    state => state,
    { classOne,deleclassOne,deleclassTwo ,ClassMenu}
)
export default class ClassIficationList1 extends Component{
    constructor(){
        super();
        this.state = {
            visible:false,
            visible1:false,
            visible2: false,
            page:1,
            limit:10, 
            routueId:1
        }
    }
    componentDidMount(){
        this.props.classOne(this.state.page,this.state.limit,'',this.props.match.params.id);
    }
    componentDidUpdate(){
      
    }
    componentWillReceiveProps(nextProps){
        if(nextProps.classList.delectClass){
            this.props.classOne(this.state.page,this.state.limit,'',this.props.match.params.id);
        
        }
        if(nextProps.classList.delectClass1){
            this.props.ClassMenu();
            this.props.history.push('/menuList/CapaCityTable1/1')
        }
    }
    showModel(){
        this.setState({
            visible : !this.state.visible
        })
    }
    showModel1(){
      this.setState({
        visible1 : !this.state.visible1
    })
    }
    showModel2(){
      this.setState({
        visible2 : !this.state.visible2
    })
    }
    monitor(){
          this.setState ({
            visible : !this.state.visible
          })
    }
    journal(){
      this.setState ({
        visible1 : !this.state.visible1
      })
    }
    addTo(){
      this.setState({
        visible2 : !this.state.visible2
    })
    }
    delectTo(shipId){
        this.props.deleclassOne(shipId,this.props.match.params.id)
    }
    onSearchs(){
        let value = document.getElementById('changyong').value
        this.props.classOne(this.state.page,this.state.limit,value,this.props.match.params.id)
    }
    delectClass(){
            this.props.deleclassTwo(this.props.match.params.id)
    }
    render() {
      console.log(this.props)
       let shipsList = this.props.classList.shipInfoDtoList;
        const columns = [{
            title: '船名',
            dataIndex: 'shipName',
            align:'center'
           
          }, {
            title: '吨位',
            dataIndex: 'tonnage',
            width:100,
            align:'center'
          }, {
            title: '实时位置',
            dataIndex: 'sailingStates',
            align:'center'
          },{
              title: '运输状态',
              dataIndex: 'sailingState',
              align:'center'
            },{
              title: '船主',
              dataIndex: 'shipOwnerName',
              align:'center'
            },{
              title: '船主电话',
              dataIndex: 'phoneNum',
              align:'center'
            },{
              title: '目的港',
              dataIndex: 'destination',
              align:'center'
            },{
              title: '到岗时间',
              dataIndex: 'arrivalTime',
              align:'center'
            },{
              title: '操作',
              align:'center',
              width:300,
              render:(text, record, index)=>
              
                  <div style={{width:'300px'}}>
                  <div className='cwidth cflot blur'>
                      <div className='cwidth '>航行轨迹</div>
                      <div  className='cwidth'>监控</div>
                  </div>
                  <div className='cwidth cflot blur'>
                      <div onClick={this.journal.bind(this)} className='cwidth'>航行日志</div>
                      <div onClick={this.monitor.bind(this)} className='cwidth'>云视频提取</div>
                  </div>
                  <div className='cwidth cflot blur'>
                      <div onClick={this.addTo.bind(this)} className='cwidth'>添加到计划</div>
                      <div onClick={this.delectTo.bind(this,record.shipId)} className='cwidth'>移除运力</div>
                  </div>
                  </div>
            }];
        const rowSelection = {
            onChange: (selectedRowKeys, selectedRows) => {
              console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            },
          };
        return (
        <div style={{}}>
            <div style={{overflow:'hidde',width:'20%',marginLeft:'60%', paddingBottom:'5px',paddingTop:'5px'}}>
            <Search
                placeholder="搜索常用运力"
                id="changyong"
                onSearch={ this.onSearchs.bind(this)}
                enterButton
                />
                <Button onClick={this.delectClass.bind(this)}>删除分类</Button>
            </div>
            <div>
            <Table rowSelection={rowSelection}
             columns={columns} 
             dataSource={shipsList} />
             </div>
             <ExtractModel visible = {this.state.visible} showModel = {this.showModel.bind(this)}/>
             <JournalModel visible1 = {this.state.visible1} showModel1 = {this.showModel1.bind(this)}/>
             <InstModel visible2 = {this.state.visible2} showModel2 = {this.showModel2.bind(this)}/>
        </div>
    )
    }
}